import { useState } from 'react'
import Taro, { useDidShow, useReady } from '@tarojs/taro'
import { View, Text, Image, Input } from '@tarojs/components'
import DoctorBrief from './components/DoctorBrief'
import styles from './index.module.scss'

import iconPlus from '@/static/icons/plus.svg'
import iconMike from '@/static/icons/mike.svg'
import imgDoctorAvatar from '@/static/fake/doctor-avatar.png'

export default function Index() {
    const scrollToBottom = () => {
        const { windowHeight } = Taro.getSystemInfoSync()
        Taro.pageScrollTo({
            scrollTop: windowHeight,
            duration: 300,
        })
    }

    useReady(() => {
        scrollToBottom()
    })

    useDidShow(() => {
        scrollToBottom()
    })

    const [heightStyle, setHeightStyle] = useState('')
    const [paddingStyle, setPaddingStyle] = useState('')
    const [inputValue, setInputValue] = useState('')
    const [msgArr, setMsgArr] = useState<string[]>([])

    const handleFocus = ({ detail }) => {
        if (detail.height !== 0) {
            setHeightStyle(`bottom: ${detail.height}px;`)
            setPaddingStyle(
                `padding-bottom: calc(150rpx + ${detail.height}px);`
            )
        } else {
            setHeightStyle('')
            setPaddingStyle('')
        }
        setTimeout(scrollToBottom, 300)
    }

    const handleBlur = () => {
        setHeightStyle('')
        setPaddingStyle('')
        setTimeout(scrollToBottom, 300)
    }

    const handleConfirm = ({ detail }) => {
        setMsgArr([...msgArr, detail.value])
        setInputValue('')
        setTimeout(scrollToBottom, 300)
    }

    return (
        <View className={styles.container}>
            <View className={styles.top}>
                <DoctorBrief
                    name='敖医师'
                    projectName='中期康复训练计划'
                    avatarUrl={imgDoctorAvatar}
                />
                <View className={styles.horizon}></View>
            </View>
            <View className={styles.panel} style={paddingStyle}>
                <View className={styles.message}>
                    <Text>您好，请查收今日的训练。</Text>
                </View>
                <View className={styles.messageRehab}>
                    <View className={styles.messageRehabItem}>
                        <View className={styles.messageRehabItemLeft}>
                            肘关节活动度
                        </View>
                        <View className={styles.messageRehabItemRight}>
                            10Min | 0°-60°
                        </View>
                    </View>
                    <View className={styles.horizon}></View>
                    <View className={styles.messageRehabItem}>
                        <View className={styles.messageRehabItemLeft}>
                            屈肘肌群力量
                        </View>
                        <View className={styles.messageRehabItemRight}>
                            5Min | 0°-60°
                        </View>
                    </View>
                </View>
                <View className={styles.messageMe}>
                    <Text>收到</Text>
                </View>
                <View className={styles.messageMe}>
                    <Text>
                        医生我想问一下最近我连带着踝关节也痛是怎么回事？
                    </Text>
                </View>
                <View className={styles.messageTimeMe}>
                    <Text>12:20 PM</Text>
                </View>
                <View className={styles.message}>
                    <Text>
                        连带着踝关节的疼痛可能与多种原因相关，如活动过度、骨折、扭伤、肌肉或韧带拉伤、关节炎等等。建议您前往医院，进行全面的身体检查以确定疼痛的原因，并制定适当的治疗方案。
                    </Text>
                </View>
                <View className={styles.messageTime}>
                    <Text>12:22 PM</Text>
                </View>
                <View className={styles.messageMe}>
                    <Text>好的</Text>
                </View>
                {msgArr.map((v, i) => (
                    <View key={i} className={styles.messageMe}>
                        <Text>{v}</Text>
                    </View>
                ))}
            </View>
            <View className={styles.bottom} style={heightStyle}>
                <View className={styles.inputArea}>
                    <View className={styles.addIcon}>
                        <Image src={iconPlus} className='icon' />
                    </View>
                    <View className={styles.input}>
                        <Input
                            controlled
                            value={inputValue}
                            onInput={({ detail }) =>
                                setInputValue(detail.value)
                            }
                            confirmType='send'
                            adjustPosition={false}
                            onFocus={handleFocus}
                            onBlur={handleBlur}
                            onConfirm={handleConfirm}
                        />
                    </View>
                    <View className={styles.button}>
                        <Image src={iconMike} className='icon' />
                    </View>
                </View>
            </View>
        </View>
    )
}
